<template>
  <div id="app" :data-theme="`${value}-theme`" :class="`${value}-theme`">
    <router-view/>
  </div>
</template>

<script>
export default{
    name: "App",
    methods: {
        handleClick(theme) {
          this.$store.dispatch("setTheme", theme);
        }
    },
    data() {
        return {}
    },
    computed: {
      value: {
        get() {
          return this.$store.getters.theme || "default"
        }
      }
    }
}
</script>

<style lang="scss">
  $default-theme : (
    base-color: #ddd,
    border-color: #000,
  );
  $red-theme : (
      base-color: red,
      border-color: red,
  );
  $themes: (
      default-theme: $default-theme,
      red-theme: $red-theme,
  );
  @mixin base-background(){
    @each $themename , $theme in $themes {
      [data-theme = '#{$themename}'] & {
        background: map-get($map: $theme, $key: base-color)
      }
    }
  }
  .block {
    width: 1000px;
    @include base-background();
  }
</style>
